<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="header">登录</div>
      <div class="form-wrapper">
        <input type="text" name="username" placeholder="username" class="input-item" v-model="username">
        <input type="password" name="password" placeholder="password" class="input-item" v-model="password">
        <div class="btn" @click="login">Login</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '235235325',
      password: '235235325',
      fixedUsername: '2352353',
      fixedPassword: '23523523'
    };
  },
  methods: {
    login() {
      if (this.username === this.fixedUsername && this.password === this.fixedPassword) {
        this.$router.push('/my');
      } else {
        alert('用户名或密码错误！');
      }
    }
  }
};
</script>

<style scoped>
.container {
  height: 980px;
  width: 100%;
}

.login-wrapper {
  opacity: 0.6;
  background-color: #08cc87;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header {
  color: rgb(251, 251, 251);
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}

.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}

.input-item:placeholder {
  text-transform: uppercase;
}

.btn {
  font-size: 25px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  width: 100%;
  margin-top: 40px;
  color: #fff;
  background-color: #08cc87;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0adabe;
}

.msg {
  text-align: center;
  line-height: 88px;
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}
</style>
